<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0614-无缝轮播练习</title>
	<style type="text/css">
		html {font-family: "Microsoft YaHei";}
		body{margin: 0;background-color: #666;}
		ul{margin: 0;padding: 0;list-style: none;}
		i {font-style: normal;}
		.wrap,.banbox{
			position: relative;
			width: 1000px;
			height: 450px;
		}
		.wrap{
			margin: 50px auto;
		}
		.banbox{
			z-index: 0;
		}
		.banbox li{
			position: absolute;
			z-index: 0;
			top: 28px;
			width: 700px;
			height: 394px;
			background-size: cover;
			transition: 1s;
		}
		.banbox li:nth-child(1),
		.banbox li:nth-child(5),
		.banbox li:nth-child(6){
			z-index: 0;
			left: 100px;
		}
		.banbox li:nth-child(3){
			z-index: 9;
			top: 0;
			width: 800px;
			height: 450px;
			left: 100px;
		}
		.banbox li:nth-child(2),
		.banbox li:nth-child(4){
			z-index: 1;
		}
		.banbox li:nth-child(2){
			left: 0;
		}
		.banbox li:nth-child(4){
			left: 300px;
		}
		.bbtn{
			position: absolute;
			z-index: 1;
			left: 0;
			right: 0;
			bottom: 20px;
			width: 600px;
			margin: 0 auto;
			font-size: 0;
			text-align: center;
		}
		.bbtn li{
			display: inline-block;
			width: 30px;
			height: 5px;
			margin: 0 10px;
			background-color: rgba(255,255,255,.7);
			border-radius: 5px;
			box-shadow: 0 0 5px 0 #000;
		}
		.bbtn li.on{
			background-color: #ff8e12;
		}
		.lbtn,.rbtn{
			position: absolute;
			z-index: 2;
			top: 0;
			width: 100px;
			height: 450px;
			cursor: pointer;
		}
		.lbtn,.rbtn{
			font-family: 新宋体;
			color: #fff;
			font-size: 60px;
			font-weight: 700;
			line-height: 450px;
			text-align: center;
			text-shadow: 0 0 10px #000;
		}
		.lbtn:hover,
		.rbtn:hover{
			color: #ff8e12;
		}
		.lbtn{
			left: 0;
		}
		.rbtn{
			right: 0;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<ul class="banbox">
			<li style="background-image: url('images/1.jpg')"></li>
			<li style="background-image: url('images/2.jpg')"></li>
			<li style="background-image: url('images/3.jpg')"></li>
			<li style="background-image: url('images/4.jpg')"></li>
			<li style="background-image: url('images/5.jpg')"></li>
		</ul>
		<ul class="bbtn"></ul>
		<i class="lbtn">&lt;</i>
		<i class="rbtn">&gt;</i>
	</section>
</body>
<script>
	var oWrap = document.getElementsByClassName('wrap')[0],
		oBan = oWrap.getElementsByClassName('banbox')[0],
		oPic = oBan.getElementsByTagName('li'),
        nPic = oPic.length,
		oBbox = oWrap.getElementsByClassName('bbtn')[0],
		oBbtn = oBbox.getElementsByTagName('li'),
		oLbtn = oWrap.getElementsByClassName('lbtn')[0],
        oRbtn = oWrap.getElementsByClassName('rbtn')[0],
		num = 2,ready = true;
	
	for(var i=0;i<nPic;i++){
		oLi = document.createElement('li');
		oBbox.appendChild(oLi);
	}
    oBbtn[num].className = 'on';
	
	oLbtn.onclick = function (){
	    if(ready){
	        ready = false;
            fnReady();
	        oBan.insertBefore(oBan.lastElementChild,oBan.firstElementChild);
		    if(num > 0){
	            num -= 1;
	            clear();
	            oBbtn[num].className = 'on';
	        }else{
	            num = nPic-1;
	            clear();
	            oBbtn[num].className = 'on';
	        }
        }
	};
    oRbtn.onclick = function (){
        if(ready){
            ready = false;
            fnReady();
            oBan.appendChild(oBan.firstElementChild);
            if(num < nPic-1){
                num += 1;
                clear();
                oBbtn[num].className = 'on';
            }else{
                num = 0;
                clear();
                oBbtn[num].className = 'on';
            }
        }
    };
	
    function clear(){
        for(var i=0;i<nPic;i++){
            oBbtn[i].className = '';
        }
    }
    function fnReady(){
        setTimeout(function(){
            ready = true
        },1000)
    }
</script>
</html>